<template>
  <div id="app">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="登录页面" name="first">登录页面</el-tab-pane>
      <el-tab-pane label="注册页面" name="second">注册页面</el-tab-pane>
      <el-tab-pane label="管理页面" name="third"></el-tab-pane>
      <el-tab-pane label="登出" name="fourth">登出</el-tab-pane>

      <transition name="fade" mode="out-in">
        <router-view></router-view>
      </transition>
    </el-tabs>
  </div>
</template>

<script>
// import HelloWorld from "./components/HelloWorld.vue";
import Main from "./views/Main/Main.vue";
export default {
  name: "app",
  components: {
    // eslint-disable-next-line vue/no-unused-components
    Main
  },
  data() {
    return {
      activeName: "first"
    };
  },
  methods: {
    // eslint-disable-next-line no-unused-vars
    handleClick(tab, event) {
      if (tab.name == "first") {
        this.$router.push("/login");
      } else if (tab.name == "second") {
        this.$router.push("/regist");
      } else if (tab.name == "third") {
        this.$router.push("/main/home");
      } else if (tab.name == "fourth") {
        this.$router.push("/login");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
#app {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  color: #2c3e50;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.2s ease;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}
</style>
